<template>
    <div :class="$style.box">
        <div
                v-if="isNoEmpty"
                :class="$style.content"
        >

        <el-container v-if="isNoEmpty" >
            <el-header>Header
        <el-menu :class="$style.menu" :default-active="formData.activeIndex" mode="horizontal">
            <el-menu-item index="1">首页</el-menu-item> <!-- todo: el-menu-item 无法解析bug-->
            <el-menu-item index="2"><a href="https://www.uctoo.com" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
                <ul role="menubar" class="el-menu--horizontal el-menu">
                    <li class="hidden"><a href="#page-top"></a></li>
                    <li role="menuitem" class="el-menu-item"><a href="index.html">线上到线下 <span class="caret"></span></a>
                    </li>
                    <li role="menuitem" class="el-menu-item"><a href="#" >中国办公室 <span class="caret"></span></a>

                    </li>

                </ul>
            </el-header>
        </el-container>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ElMenu',
    props: {
        formData: {
            type: Object,
            default: () => ({})
        }
    },
    computed: {
        isNoEmpty() {
            const { formData } = this;
            return !!(formData.menuList && formData.menuList.length > 0);
        }
    }
};
</script>

<style module>
    @import 'demo-common/css/variable.css';
    .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .box {
        background-color: #FFFFFF;
        width: 1920px;
    }
</style>
